<template>
    <section class="section popular-destinations">
        <div class="container">
            <div class="section-header">
                <div class="section-nav">
                    <button @click="scrollDestinations(-1)" class="nav-arrow">←</button>
                    <button @click="scrollDestinations(1)" class="nav-arrow">→</button>
                </div>
            </div>
            <div class="destinations-grid" ref="destinationsGrid">
                <DestinationCard v-for="destination in destinations" :key="destination.id" :destination="destination" />
            </div>
            <button class="view-all" @click="handleViewAll">查看全部目的地</button>
        </div>
    </section>
</template>

<script>
import DestinationCard from '@/components/DestinationCard.vue'

export default {
    name: 'PopularDestinations',
    components: {
        DestinationCard
    },
    data() {
        return {
            destinations: [
                {
                    id: 1,
                    name: '巴厘岛',
                    image: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4',
                    country: '印度尼西亚',
                    price: '¥3,999起',
                    rating: 4.8,
                    reviews: 1245,
                    highlights: ['浪漫度假', '潜水胜地', '文化体验']
                },
                {
                    id: 2,
                    name: '巴黎',
                    image: 'https://images.unsplash.com/photo-1431274172761-fca41d930114',
                    country: '法国',
                    price: '¥7,899起',
                    rating: 4.7,
                    reviews: 1892,
                    highlights: ['艺术之都', '浪漫之城', '美食天堂']
                },
                {
                    id: 3,
                    name: '东京',
                    image: 'https://images.unsplash.com/photo-1492571350019-22de08371fd3',
                    country: '日本',
                    price: '¥5,899起',
                    rating: 4.9,
                    reviews: 1567,
                    highlights: ['现代都市', '传统文化', '购物美食']
                },
                {
                    id: 4,
                    name: '马尔代夫',
                    image: 'https://images.unsplash.com/photo-1506929562872-bb421503ef21',
                    country: '马尔代夫',
                    price: '¥9,999起',
                    rating: 4.9,
                    reviews: 982,
                    highlights: ['奢华水屋', '碧海白沙', '蜜月首选']
                },
                {
                    id: 5,
                    name: '纽约',
                    image: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9',
                    country: '美国',
                    price: '¥8,499起',
                    rating: 4.6,
                    reviews: 1321,
                    highlights: ['世界之都', '多元文化', '购物天堂']
                },
                {
                    id: 6,
                    name: '悉尼',
                    image: 'https://images.unsplash.com/photo-1524820197278-540916411e20',
                    country: '澳大利亚',
                    price: '¥6,799起',
                    rating: 4.7,
                    reviews: 876,
                    highlights: ['歌剧院', '阳光海滩', '美食美酒']
                },
                {
                    id: 7,
                    name: '罗马',
                    image: 'https://images.unsplash.com/photo-1529260830199-42c46626c886',
                    country: '意大利',
                    price: '¥5,599起',
                    rating: 4.8,
                    reviews: 1123,
                    highlights: ['历史遗迹', '艺术瑰宝', '美食文化']
                },
                {
                    id: 8,
                    name: '开普敦',
                    image: 'https://images.unsplash.com/photo-1520250497591-112f2f40a3f4',
                    country: '南非',
                    price: '¥7,299起',
                    rating: 4.5,
                    reviews: 654,
                    highlights: ['桌山', '葡萄酒庄', '野生动物']
                }
            ]
        }
    },
    methods: {
        scrollDestinations(direction) {
            const grid = this.$refs.destinationsGrid;
            grid.scrollBy({ left: direction * 300, behavior: 'smooth' });
        },
        handleViewAll() {
            // 这里可以处理"查看全部"按钮的点击事件
            alert('即将展示全部目的地');
            // 或者 this.$emit('view-all') 如果需要通知父组件
        }
    }
}
</script>

<style scoped>
.popular-destinations {
    background-color: var(--light-color);
    padding: 60px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.section-title {
    font-size: 2rem;
    color: var(--dark-color);
}

.section-nav {
    display: flex;
    gap: 10px;
}

.nav-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.nav-arrow:hover {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.destinations-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding-bottom: 20px;
    scrollbar-width: none;
}

.destinations-grid::-webkit-scrollbar {
    display: none;
}

.view-all {
    display: block;
    margin: 40px auto 0;
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
}

.view-all:hover {
    background: var(--primary-color);
    color: var(--white);
}

@media (max-width: 768px) {
    .popular-destinations {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
}
</style>